<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>51微贷</title>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../../css/common.css">
		<link rel="stylesheet" type="text/css" href="../../css/icomoon/style.css">
		<script type="text/javascript" src="../../js/rem.js"></script>
	</head>
	<body class="bg" onload="loaded()">
		<div class="m-invitation">
			<div class="hd f-pr">
				<h3 class="title f-pr">
					<span>我的邀请</span>
					<i class="icon-angle-left f-pa"></i>
				</h3>
				<div class="nbox">
					<p class="num">22</p>
					<p>累计成功邀请人数</p>
				</div>
				<ul>
					<li>
						<p class="num">11</p>
						<p>累计已邀请投资人数</p>
					</li>
					<li>
						<p class="num">3</p>
						<p>本月已邀请投资人数</p>
					</li>
				</ul>
				<a class="rule">规则&gt;</a>
			</div>
			<div class="tabs">
				<a class="tab cur" data-id="1">奖励明细</a>
				<a class="tab" data-id="2">邀请记录</a>
			</div>
			<div class="wrapper" id="wrapper">
				<div id="scroller">
					<div class="table-box" id="table1">
						<table>
							<thead>
								<tr>
									<th>日期</th>
									<th>被邀请人</th>
									<th>奖励</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>2017-09-25</td>
									<td>136****3586</td>
									<td>1%加息券</td>
								</tr>
								<tr>
									<td>2017-09-25</td>
									<td>136****3586</td>
									<td>8元代金券</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="table-box hide" id="table2">
						<table>
							<thead>
								<tr>
									<th>注册时间</th>
									<th>被邀请人</th>
									<th>是否已投资</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>2017-09-25</td>
									<td>136****3586</td>
									<td>是</td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>2017-09-25</td>
									<td>136****3586</td>
									<td class="no">否</td>
									<td><a class="remind">提醒他</a></td>
								</tr>
								<tr>
									<td>2017-09-25</td>
									<td>136****3586</td>
									<td class="no">否</td>
									<td><a class="already">已提醒</a></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<a class="invitation">邀友赚佣金</a>
		</div>

		<div class="overlay">
			<div class="modal modal-invitation">
				<h3>邀请好友奖励规则</h3>
				<div class="detail">
					<p><label>1、</label><span>现邀请新用户注册无忧微贷并开始投资，您将收获额外奖励。</span></p>
					<p><label>2、</label><span>每成功邀请一位新用户，该用户在无忧微贷的第一个投资标的满标后，您将立即收到现金券奖励。</span></p>
					<p><label>3、</label><span>邀请越多，收益越可观！成功邀请人数到达一定量后，邀请奖励将阶级增加，详情可查阅一下表格说明。</span></p>
				</div>
				<table>
					<thead>
						<tr>
							<th>成功推荐人数</th>
							<th>每位奖励</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>5</td>
							<td>5元代金券</td>
						</tr>
						<tr>
							<td>10</td>
							<td>8元代金券</td>
						</tr>
						<tr>
							<td>15</td>
							<td>1%加息券</td>
						</tr>
						<tr>
							<td>20</td>
							<td>15元现金券</td>
						</tr>
						<tr>
							<td>50</td>
							<td>25元现金券</td>
						</tr>
						<tr>
							<td>100</td>
							<td>3%加息券</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<script type="text/javascript" src="../../js/zepto.min.js"></script>
		<script type="text/javascript" src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/common.js"></script>
		<script type="text/javascript" src="../../js/iscroll.js"></script>
		<script type="text/javascript" src="../../js/scroller.js"></script>

		<script type="text/javascript">
			tab('.m-invitation .tab', '#table', 'cur', 2);

			// 已提醒提示语
			$('.already').on('tap', function(){
				mui.alert('提醒Ta后，48小时后可以再次提醒！', '提示', '我知道了');
			});

			// 未提醒提示语
			$('.remind').on('tap', function(){
				var btnArray = ['取消', '确定'];
				mui.confirm('无忧微贷将会给您的好友发送一条提醒短信：“【无忧微贷】上海银行资金存管上线啦！更合规、更安全、拥抱监管，厚积薄发，为您的财富增值保驾护航！更有多重壕礼，等您来领！退订回TD”', '短信提醒', btnArray, function(e){
					if(e.index == 1){
						// 确定事件
					}else{
						// 取消事件
					}
				});
			});

			getRule();

			function getRule(){
				var $pop = $(".overlay");

			    function modalHidden($ele) {
			        $ele.removeClass("modal-in");
			        $ele.one("transitionend", function() {
			            $ele.css("display", "none");
			            $pop.removeClass("active");
			        });
			    }

			    $(".rule").on("click", function() {
			        $pop.addClass("active");
			        var $modal = $(".modal");
			        $modal.css("display", "block");
			        $modal.addClass("modal-in");

			        // $("#close").on("click", function(e) {
			        //     modalHidden($modal);
			        //     e.stopPropagation();
			        // });

			        $(".overlay").on("click", function(e) {
			            if (e.target.classList.contains("overlay")) {
			                modalHidden($modal);
			            }
			        });
			    });
			}
		</script>
	</body>
</html>